<template>
    <div>
        <head-btn :page-title="page_title"></head-btn>
        <!-- 考勤编辑区 -->
        <div class="edit_atten_area">
            <!-- 考勤名称 -->
            <div class="atten_title pl_24">
                <span>考勤组名称</span>
                <input 
                class="fr"
                type="text"
                maxlength="14"
                placeholder="请输入考情组名称"
                >
            </div>
            <!-- 考勤地点 -->
            <div class="atten_place pl_24">
                <div>
                    <span>考勤地点</span>
                    <div class="place_name fr pr inline-block" @click="$router.push('/mapPosition/'+ place_range)">
                        火炉山森林公园
                        <i class="iconfont pa more_btn">&#xe601;</i>
                    </div>
                    
                </div>
                <div class="line_cut"></div>
                <div>
                    <span>有效范围</span>
                    <div class="place_name pr fr inline-block" @click="click">
                        {{place_range | valueFilter}}
                        <i class="iconfont pa more_btn">&#xe601;</i>
                    </div>
                    
                </div>
            </div>
            <!-- 考勤组类型 -->
            <div class="atten_info ">
                <div class="atten_head pl_24 font_24 lev_col2">考勤组类型</div>
                <div class="atten_group_set">
                    <div class="inline-block kq_btn  mr_37" 
                    @click= "group_set.showIndex = group_set.values[0];"
                    :class="{'kq_btn_sel': group_set.showIndex == group_set.values[0]}"
                    >固定班</div>
                    <div class="inline-block kq_btn mr_37"
                    @click = "group_set.showIndex = group_set.values[1];"
                    :class="{'kq_btn_sel': group_set.showIndex == group_set.values[1]}"
                    >排班</div>
                    <div class="inline-block kq_btn "
                    @click = "group_set.showIndex = group_set.values[2];"
                    :class="{'kq_btn_sel': group_set.showIndex == group_set.values[2]}"
                    >自由班</div>
                    <!-- 固定班show -->
                    <div class="fixed_group" v-show = "group_set.showIndex == group_set.values[0]">
                        所有人按照相同时间打卡，适用于上班时间固定的企业
                    </div>
                    <div class="fixed_group_time" v-show = "group_set.showIndex == group_set.values[0]">
                        <div class="group_select_day">周一、二、三、四、五
                            <div class="group_time_range fr">9:00-17:00</div>
                        </div>
                        
                        <div class="group_edit">
                            <span>编辑...</span>
                        </div>
                    </div>
                    <!-- 排班show -->
                    <div class="fixed_group" v-show = "group_set.showIndex == group_set.values[1]">
                        不同人员按各自排班时间打卡，适用于餐饮、制造、服务、医疗等行业
                    </div>
                    <div class="fixed_group_time" v-show = "group_set.showIndex == group_set.values[1]">
                        <div class="group_select_day">早班
                            <div class="group_time_range fr">9:00-17:00</div>
                        </div>
                        <div class="group_select_day">晚班
                            <div class="group_time_range fr">9:00-17:00</div>
                        </div>
                        <div class="group_edit">
                            <span>编辑...</span>
                        </div>
                    </div>
                    <!-- 自由班show -->
                    <div class="fixed_group" v-show = "group_set.showIndex == group_set.values[2]">
                        上下班时间不固定，可随时打卡，适用于家政、装修、物流等计算时常的行业
                    </div>
                    <div class="fixed_group_time" v-show = "group_set.showIndex == group_set.values[2]">
                        <div class="group_select_day">周一、二、三、四、五
                            <div class="group_time_range fr"></div>
                        </div>
                        <div class="group_edit">
                            <span>编辑...</span>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 考勤人员 -->
            <div class="atten_personal pl_24">
                <div>
                    <span>考勤人员</span>
                    <div class="place_name pr fr inline-block" @click ="$router.push({name:'CheckAttenPerson'})">
                        53人
                        <i class="iconfont pa more_btn">&#xe601;</i>
                    </div>
                    
                </div>
                <div class="line_cut"></div>
                <div>
                    <span>异常审批人</span>
                    <div class="place_name pr fr inline-block">
                        梁爽
                        <i class="iconfont pa more_btn">&#xe601;</i>
                    </div>
                    
                </div>
            </div>
            <!-- 其他设置 -->
            <div class="atten_other_set ">
                <div class="atten_head pl_24 font_24 lev_col2">其他设置</div>
                <div class="other_set pl_24">
                    <div class="other_set_line clearfix">
                        <span>允许迟到</span>
                        <div class="place_name fr pr inline-block" @click = "timePicker">
                            {{time_late | valueFilter}}
                            <i class="iconfont pa more_btn">&#xe601;</i>
                        </div>
                        
                    </div>
                    <div class="line_cut"></div>
                    <div class="other_set_line clearfix">
                        <span>中国节假日不需要打卡</span>
                        <div class="place_name switch fr pr inline-block">
                            <my-switch open-name="" close-name="" v-model="toggle"></my-switch>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 创建btn -->
            <div class="creat_atten_btn">
                <button class="btn_atten btn_creat">
                    创建考勤组
                </button>
            </div>
        </div>
    </div>
</template>

<script>
import 'babel-polyfill';
import mySwitch from 'vue-switch/switch-2.vue';
import ToggleButton from 'vue-js-toggle-button/src/Button'
import HeadBtn from './common/headBtn/HeadBtn'
export default {
    name: 'NewAttendence',
    data () {
        return {
            page_title: '创建考勤组',
            place_range: null,
            time_late: null,
            toggle: false,
            // 班牌设置
            group_set: {
                //1-固定  2-排班 3-自由班
                values: [1, 2, 3],
                showIndex: 1
            },
            ticketSlots: [
                {
                values: ['100米', '200米', '300米', '400米', '500米'],
                defaultIndex: 2
                }
            ],
            // 迟到时间
            timeLateSlots: [
                {
                    values: ['5分钟', '15分钟', '20分钟', '25分钟', '30分钟'],
                    defaultIndex: 2
                }
            ]
        }
    },
    components: {
        'my-switch': mySwitch,
        HeadBtn
    },
    mounted () {
        this.place_range = this.ticketSlots[0].values.slice(this.ticketSlots[0].defaultIndex, this.ticketSlots[0].defaultIndex+1);
        this.ticketPicker = new this.$popup.Picker({
            propsData: {
                slots: this.ticketSlots,
                onConfirm: this.confirmTicket
            }
        });

        this.time_late = this.timeLateSlots[0].values.slice(this.timeLateSlots[0].defaultIndex, this.timeLateSlots[0].defaultIndex+1);
        this.timesPicker = new this.$popup.Picker({
            propsData: {
                slots: this.timeLateSlots,
                onConfirm: this.confirmTime
            }
        });
    },
    methods: {
        
        click (e) {
            this.ticketPicker.open(e, {
                propsData: {
                defaultValues: this.place_range
                }
            });
            
        },
        confirmTicket (picker) {
            this.place_range = picker.getValues();
        },
        timePicker (e) {
            this.timesPicker.open(e, {
                propsData: {
                    defaultValues: this.time_late
                }
            });
        },
        confirmTime (picker) {
            return this.time_late = picker.getValues();
        }

    },
    filters: {
        valueFilter (val) {
            if(Array.isArray(val)){
                return val.toString();
            }else{
                return '请选择'
            }
        }
    }
}
</script>

<style scoped lang="less">
@import '../assets/styles/button.less';

.edit_atten_area{
    background-color: #fafafa;
    overflow: hidden;
}
.edit_atten_area>div{
    margin-top: 0.17rem;
}
.atten_title>input{
    padding-top: 0.28rem;
    padding-right: 0.76rem;
    text-align: right;
    font-size: 0.24rem;
    font-family: PingFangSC-Regular;
    color: rgba(93,100,110,1);
    width: 2.7rem;  
    white-space:nowrap; 
    overflow:hidden;  
    -ms-text-overflow: ellipsis;
    text-overflow: ellipsis;
}
.atten_title,.atten_place,.atten_personal,.other_set_line,.other_set_line{
    height: 0.95rem;
    line-height: 0.95rem;
    background-color:#fff;
}
.atten_place,.atten_personal{
    height: 1.90rem;
}
.atten_group_set{
    background-color:#fff;
}
.other_set{
    background-color:#fff;
    .line_cut{
        height: 0.02rem
    }
}
.edit_atten_area .creat_atten_btn{
    background-color:#fff;
    height: 1.17rem;
    background:rgba(255,255,255,1);
    box-shadow: 0rem -0.02rem 0rem 0rem rgba(0,0,0,0.08);
    margin-top: 0.43rem;
}

    .place_name{
        padding-right: 0.76rem;
        box-sizing: border-box;
        font-size: 0.24rem;
        color: @font_col1; 
    }
    .switch{
        padding-right: 0.36rem;
        top: 0.16rem;
    }
.pr{
    .more_btn{
        top:0;
        right: 0.42rem;
    }
}
.line_cut{
    height:0.01rem;
    background-color: #f0f0f0;
    margin-right: 0.42rem;
}
.atten_head{
    line-height: 1;
    padding-bottom: 0.09rem;
    padding-top: 0.1rem;
}
.atten_group_set{
    padding: 0.34rem 0.41rem;
    line-height: 1;
    .fixed_group{
        padding-top: 0.14rem;
        padding-bottom: 0.31rem;
        font-size: 0.24rem;
        color:rgba(161,161,161,1);
        line-height: 0.31rem;
    }
    .fixed_group_time{
        padding: 0.28rem 0.26rem 0.34rem;
        background:rgba(243,248,254,1);
        border-radius: 0.07rem;
        font-size: 0.24rem;
        color: @font_col1;
        line-height: 0.34rem;
        // font-weight: 300;
        .group_select_day{
            padding-bottom: 0.12rem;
            
        }
        .group_edit{
            color: @btn_col;
        }
    }
}
.creat_atten_btn{
    text-align: center;
    padding-top: 0.17rem;
}
.atten_other_set{
    .vue-switch{
        width: 0.98rem;
        height: 0.5rem;
        border-radius: 0.7rem;
    }
    .vue-switch.z-on{
        background-color: #157CF8;
        border-color: #157CF8;
    }
    .vue-switch::after {
        width: 0.5rem;
        height: 0.5rem;
        border-radius: 0.25rem;
        top: -0.01rem;
    }
    .vue-switch.z-on::after {
        left: 0.43rem;
    }
}


</style>


